@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #f2f3f7;
  }

  &::-webkit-scrollbar {
    width: 6px;
    height: 12px;
  }

  &::-webkit-scrollbar-thumb {
    background: #dbdbdb;
    border-radius: 20px;
    &:hover {
      background: #cccccc;
    }
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin ieScrollBar {
  /*三角箭头的颜色*/
  scrollbar-arrow-color: #fff;
  /*滚动条滑块按钮的颜色*/
  scrollbar-face-color: #f8f5f5;
  /*滚动条整体颜色*/
  scrollbar-highlight-color: #f8f5f5;
  /*滚动条阴影*/
  scrollbar-shadow-color: #fff;
  /*滚动条轨道颜色*/
  scrollbar-track-color: #fff;
  /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
  scrollbar-3dlight-color: #fff;
  /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
  scrollbar-darkshadow-color: #fff;
  /*滚动条基准颜色*/
  scrollbar-base-color: #fff;
}

// safari中禁止自动出现省略的title
@mixin safariElli {
  &::after {
    content: " ";
    display: block;
  }
}

@mixin tabs {
  .el-tabs {
    .el-tabs__nav-wrap::after {
      display: none;
    }
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__nav-wrap {
      .el-tabs__nav {
        .el-tabs__item {
          font-size: 16px;
          color: #0d0d0d;
          height: 36px;
          padding: 0 12px;
          font-weight: normal;
          &:hover {
            color: var(--themeColor);
          }
        }

        .el-tabs__item.is-active {
          color: var(--themeColor);
          font-weight: 600;
        }

        .el-tabs__active-bar {
          background-color: var(--themeColor);
        }
      }
    }
  }
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 0;
  }
}
